<template>
    <div class="login-container">
        <div class="login-content">
            <div class="logo">
                <img src="../../assets/image/logo.png" alt="">
            </div>

            <div class="login-wrapper">
                <div class="phone-login">
                    <div @click="goPhoneLogin" class="btn">手机号登录</div>
                </div>
                <div class="other-login">
                    <div class="logo-icon"><img src="../../assets/image/wechat.png" alt=""></div>
                    <div class="logo-icon"><img src="../../assets/image/QQ.png" alt=""></div>
                    <div class="logo-icon"><img src="../../assets/image/weibo.png" alt=""></div>
                </div>
                <div class="promise">
                    <span style="color:#e1e2e3">登录代表已同意</span>
                    <span>《用户协议》</span>
                    <span>《隐私协议》</span>
                    <span>《儿童协议》</span>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    name:'Login',
    methods:{
        goPhoneLogin(){
            this.$router.push({path:'/phoneLogin'})
        }
    }

}
</script>


<style lang="css" scoped>
    .login-container{
        height: 100%;
        widows: 100%;
        background-color: #e70012;
    }
    .login-content{
        width: 100%;
        height: 100%;
        position: relative;

    }
    .logo{
        height: 60px;
        width: 90px;
        position: absolute;
        left: 50%;
        transform: translateX(-75%);
        top: 20%;
        
    }
    .logo img{
        width: 150%;
        height: 150%; 
    }

    .login-wrapper{
        width: 100%;
        position: absolute;
        bottom: 15%;
    }
    .phone-login{
        width: 100%;
        margin: auto;
        /* height: 40px; */
        padding: 10px 0;
    }
    .phone-login .btn{
        display: flex;
        align-content: center;
        justify-content: center;
        width: 50%;
        padding: 7px 10px;
        margin: auto;
        background-color: #fff;
        border-radius: 20px;
        color: #e70012;
        font-size: 15px;
        font-weight: bold;
    }
    .other-login{
        display: flex;
        width: 50%;
        margin: auto;
        padding: 7px 10px;
        justify-content: space-between;

    }
     .logo-icon{
         height: 100%;
         width: 30px;
         flex: 1;
         /* margin-left: 40px; */
         display: flex;
         align-content: center;

     }
     .logo-icon img {
         width: 30px;
         height:30px;
         display: block;
         margin-left: 20px;
         border-radius: 50%;
         padding: 5px;
     }
     .promise{
         width: 100%;
         margin: auto;
         /* height: 40px; */
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
         text-align: center;
     }
     .promise span:nth-child(n+2){
         color: #ffffff;
     }
     
    
</style>